import React, { useState } from "react";
import styles from "./index.module.css";
import { Popup, Space, Button, Steps } from "antd-mobile";
function Index(props) {
  const { data } = props;
  console.log(data, "1234");
  const [visible1, setVisible1] = useState(false);
  const { Step } = Steps;
  return (
    <div>
      <div className={styles.boxleft}>
        <span>{data.start}</span>
        <span>D23212</span>
        <span>{data.startTime}</span>
        <span>合肥南</span>
        <span>1h 12m</span>
        <span>合肥南</span>
        <span className={styles.chatStop} onClick={() => setVisible1(true)}>
          列车停靠站
        </span>
      </div>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
        <Steps direction="vertical">
          <Step
            title="北京"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="天津"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="山东"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="江苏"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="成都"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="广东"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
        </Steps>
      </Popup>
    </div>
  );
}

export default Index;
